<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>宠物信息</title>
  <meta name="renderer" content="webkit">
  <meta name="force-rendering" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" type="text/css" href="#(CPATH)/_view/static/css/common.css">
  <link rel="stylesheet" type="text/css" href="#(CPATH)/_view/static/css/center.css">
  <link rel="stylesheet" type="text/css" href="#(CPATH)/_view/static/css/newLook.css">
  <script type="text/javascript" src="#(CPATH)/_view/static/js/jquery.min.js"></script>
  <script type="text/javascript" src="#(CPATH)/_view/static/js/fontRem.js"></script>
  <script type="text/javascript" src="#(CPATH)/_view/static/js/common.js"></script>
  <script type="text/javascript" src="#(CPATH)/_view/static/layer_mobile/layer.js"></script>
  <script type="text/javascript" src="#(CPATH)/_view/static/laydate/laydate.js"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<div class="bigMain resources">
  <div class="mainContent">
    <div class="listWrap">
    	<input type="hidden" name="id" id="id" value="#(petAnimal.id??'')" >
      <div class="infoIterm clearfix">
        <span class="title">昵称</span>
        <input type="text" title="need" placeholder="请输入宠物昵称" id="name" name="name" maxlength="10" class="infoInput on-right" value="#(petAnimal.name??'')"/>
      </div>
      <div class="infoIterm clearfix">
        <span class="title">类别</span>
        <div class="state-filter on-right belong">
            <div class="batch-search">
            	
            	
              <input type="hidden" value="#(petAnimal.category??'')" id="category" name="category" />
              <input type="text" value="#(cn.samehope.pet.engine.CommonEngine::getCategoryValue(petAnimal.category??'') )" class="titleInput" readonly="" />
              <i class="caret-arrow"></i>
            </div>  
            <div class="downListWrap none">
                <div class="trangleWrap">
                    <i class="trangle"></i>
                </div>
                <div class="downSlide">
                    <ul>
                        #if(petAnimal.category??'' == '0')
                    		<li id="0" class="selected">狗</li>
                    		<li id="1">猫</li>
                    	#elseif(petAnimal.category??'' == '1')
                        	<li id="0">狗</li>
                        	<li id="1" class="selected">猫</li>
                        #else
                        	<li id="0">狗</li>
                        	<li id="1">猫</li>
                        #end
                    </ul>
                </div>    
            </div>
        </div>
      </div>
      <div class="infoIterm clearfix">
        <span class="title">生日</span>
        #if(petAnimal.birthday??'' == '')
        	<input type="text" title="need" placeholder="请选择日期" id="birthday" name="birthday" class="infoInput on-right" value=""/>
        #else
        	<input type="text" title="need" placeholder="请选择日期" id="birthday" name="birthday" class="infoInput on-right" value="#date(petAnimal.birthday, 'yyyy-MM-dd')"/>
        #end
      </div>
      <div class="infoIterm clearfix">
        <span class="title">品种</span>
        <input type="text" title="need" placeholder="请输入品种" id="breed" name="breed" maxlength="10" class="infoInput on-right" value="#(petAnimal.breed??'')"/>
      </div>
      <div class="infoIterm clearfix">
        <span class="title">体重</span>
        <input type="number" placeholder="输入体重" id="weight" name="weight" maxlength="10" class="infoInput on-right" value="#(petAnimal.weight??'')" />
      </div>
      <div class="infoIterm clearfix">
        <span class="title">爱好</span>
        <input type="text" placeholder="输入爱好" id="hobby" name="hobby" maxlength="20" class="infoInput on-right" value="#(petAnimal.hobby??'')" />
      </div>
      
      <div class="infoIterm clearfix">
        <span class="title">性别</span>
        <div class="state-filter on-right belong">
            <div class="batch-searchXX">
            	<input type="hidden" title="need" id="sex" name="sex" value="#(petAnimal.sex??'')" />
            	<input type="text" value="#(cn.samehope.pet.engine.CommonEngine::getSexValue(petAnimal.sex??'') )" class="titleInput" readonly="" />
              	<i class="caret-arrow"></i>
            </div>  
            <div class="downListWrapXX none">
                <div class="trangleWrap">
                    <i class="trangle"></i>
                </div>
                <div class="downSlide">
                    <ul>
                    	#if(petAnimal.sex??'' == '0')
                    		<li id="0" class="selected">公</li>
                    		<li id="1">母</li>
                    	#elseif(petAnimal.sex??'' == '1')
                        	<li id="0">公</li>
                        	<li id="1" class="selected">母</li>
                        #else
                        	<li id="0">公</li>
                        	<li id="1">母</li>
                        #end
                    </ul>
                </div>    
            </div>
        </div>
      </div>
    </div>
    <div class="uploadImageWrap">
    	<input type="hidden" title="need" id="pic" name="pic" value="#(petAnimal.pic??'')">
    	#if(petAnimal.pic??'' == '')
        <div class="inline-block"><img onclick="choicePicture()" id="image_url" height="100px" width="100px" src="#(CPATH)/_view/static/images/defaultImage.png"></div>
        <span class="tips">点击上传图片</span>
        #else
        <div class="inline-block"><img onclick="choicePicture()" id="image_url" height="100px" width="100px" src="#(CPATH)#(petAnimal.pic??'')"></div>
        <span class="tips">点击更换图片</span>
        #end
    </div>
    <div class="common-btn sure" onclick="save()">保存</div> 
  </div>
</div>


</body>
<script>console.log(location.href.split('#')[0]);</script>
<script type="text/javascript">
  $(function () {
    $('.batch-search').click(function(){
      $('.downListWrap').removeClass('none');
      $('.downListWrapXX').addClass('none');
    })
    $('.downListWrap li').click(function(){
      var value = $(this).text();
      $('.batch-search input').val(value);
      $('.downListWrap').addClass('none');
      $('#category').val($(this).attr("id"));
    })
    
    $('.batch-searchXX').click(function(){
      $('.downListWrapXX').removeClass('none');
      $('.downListWrap').addClass('none');
    })
    $('.downListWrapXX li').click(function(){
      var value = $(this).text();
      $('.batch-searchXX input').val(value);
      $('.downListWrapXX').addClass('none');
      $('#sex').val($(this).attr("id"));
    })
    
    $("#birthday").focus(function(){
        document.activeElement.blur();
    });
    wx.config({
	    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	    appId: '#(appId)', // 必填，公众号的唯一标识
	    timestamp: #(timestamp), // 必填，生成签名的时间戳
	    nonceStr: '#(noncestr)', // 必填，生成签名的随机串
	    signature: '#(signature)',// 必填，签名
	    jsApiList: [
			'chooseImage',
			'previewImage',
			'uploadImage',
			'downloadImage'            
	    ] // 必填，需要使用的JS接口列表
	});
    
    wx.ready(function(){

	});

	wx.error(function(res){
	});
    
    laydate.render({
    	  elem: '#birthday' //指定元素
    	});
  })
</script>

<script>

function save(){
	var nameStr = $("#name").val();
	if(nameStr == ''){
		layer.open({
    	    content: '请输入宠物昵称！'
    	    ,skin: 'msg'
    	    ,time: 2 //2秒后自动关闭
    	  });
		return;
	}
	var categoryStr = $("#category").val();
	if(categoryStr == ''){
		layer.open({
    	    content: '请选择类别！'
    	    ,skin: 'msg'
    	    ,time: 2 //2秒后自动关闭
    	  });
		return;
	}
	
	var birthdayStr = $("#birthday").val();
	if(birthdayStr == ''){
		layer.open({
    	    content: '请输入生日！'
    	    ,skin: 'msg'
    	    ,time: 2 //2秒后自动关闭
    	  });
		return;
	}
	
	$.ajax({
		type: "post",
		url: "#(CPATH)/animal/save",
		data: {
			  "petAnimal.id": $("#id").val()
			  ,"petAnimal.name": $("#name").val()
			  ,"petAnimal.sex": $("#sex").val()
			  ,"petAnimal.pic": $("#pic").val()
			  ,"petAnimal.birthday": $("#birthday").val()
			  ,"petAnimal.category": $("#category").val()
			  ,"petAnimal.breed": $("#breed").val()
			  ,"petAnimal.weight": $("#weight").length
			  ,"petAnimal.hobby": $("#hobby").val()
		},
		dataType: "JSON",
		success: function(data) {
			if(data.state=='ok'){
				layer.open({
		    	    content: '保存成功！'
		    	    ,skin: 'msg'
		    	    ,time: 2 //2秒后自动关闭
		    	    ,end: function () {
		    	    	window.location.href = '#(CPATH)/animal';
		            }
		    	  });
			}else{
				layer.open({
		    	    content: '保存失败！'
		    	    ,skin: 'msg'
		    	    ,time: 2 //2秒后自动关闭
		    	    
		    	  });
			}

		},
		error: function() {}
	});		  
}

var localIds = [];

function choicePicture(){
    wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
        	layer.open({type: 2});
        	
            localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            
            syncUpload();
        }
    });
}

function syncUpload() {
    if (localIds.length) {
        var localId = localIds.pop();
        wx.uploadImage({
            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 0, // 默认为1，显示进度提示
            success: function (res) {
                var mediaId = res.serverId; // 返回图片的服务器端ID，即mediaId
                //将获取到的 mediaId 传入后台 方法savePicture
                $.ajax({
					type: "post",
					url: "#(CPATH)/animal/saveImages",
					data: {
						"mediaId" : mediaId
					},
					dataType: "JSON",
					async: false,
					success: function(data) {
						$("#pic").val(data.filePath);
                    	$("#image_url").attr('src', '#(CPATH)' + data.filePath);
                    	syncUpload();
					},
					error: function() {}
				});		
            },
            fail: function (res) {
                layer.msgModal('上传图片失败，请重试')
            }
        });
    }else{
    	layer.closeAll('loading');
    }
}
</script>
</html>